<!DOCTYPE html>
<html>

<head>
  <title>修改密码</title>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../js/axios.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../../css/login.css">
  <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
  <script src="../../js/axios.min.js"></script>
  <script src="../../js/jquery.js"></script>
  <style>
    .container {
      max-width: 600px;
    }

    h1 {
      color: #333;
      text-align: center;
      margin-bottom: 30px;
    }

    label {
      color: #555;
    }

    .form-control {
      border-radius: 25px;
    }

    .btn-primary {
      background-color: #007bff;
      border-color: #007bff;
      border-radius: 25px;
    }

    .btn-primary:hover {
      background-color: #0069d9;
      border-color: #0062cc;
    }

    .btn-secondary {
      border-radius: 25px;
    }

    .custom-title {
      font-size: 28px;
      /* 自定义字体大小 */
      font-weight: bold;
      /* 加粗字体 */
    }
    
  </style>
</head>

<body>
  
  <br><br><br><br><br><br>
  <div class="container ">
    <h1 class="mb-4 text-center text-primary custom-title">修改密码</h1>
    <form id="changePasswordForm" class="row g-3">
      <div class="col-md-12">
        <label for="account" class="form-label">账号：</label>
        <input type="text" class="form-control" id="account" required>
      </div>
      <div class="col-md-12">
        <label for="idCard" class="form-label">身份证号码：</label>
        <input type="text" class="form-control" id="idCard" required>
      </div>
      <div class="col-md-12">
        <label for="newPassword" class="form-label">新密码：</label>
        <input type="password" class="form-control" id="newPassword" required>
      </div>
      <div class="col-md-12 text-center">
        <button type="submit" class="btn btn-primary mx-3">确认</button>
        <button type="button" class="btn btn-secondary" onclick="window.location.href='login.html'">取消</button>
      </div>
    </form>
  </div>

  <script>
    // 获取修改密码页面的表单元素
    const changePasswordForm = document.getElementById('changePasswordForm');

    // 监听表单提交事件
    changePasswordForm.addEventListener('submit', async (event) => {
      event.preventDefault(); // 阻止表单默认提交行为

      // 获取表单中的账号、身份证号码、新密码
      const account = document.getElementById('account').value;
      const idCard = document.getElementById('idCard').value;
      const newPassword = document.getElementById('newPassword').value;

      try {
        // 发送POST请求修改密码
        const response = await axios.post('http://localhost:8888/api/user/changePassword', {
          account,
          idCard,
          newPassword
        });

        // 根据返回结果显示相应的提示信息
        if (response.data.code === 0) {
          // 修改密码成功
          alert(response.data.message);
          window.location.href = 'login.html'; // 返回登录页面
        } else {
          // 修改密码失败
          alert(response.data.message);
        }
      } catch (error) {
        console.error(error);
        alert('系统错误，请稍后重试');
      }
    });

  </script>
</body>

</html>